<template>
  <div id="password">
     <section class="order-main-header">
            <mt-header title="修改登录密码">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
    <div class="form-format">
          <div class="val-input">
              <span class="val-t">旧密码：</span>
              <input type="password" v-model="formData.oldPwd" >
          </div>
          <div class="val-input">
              <span class="val-t">新密码：</span>
              <input type="password" v-model="formData.newPwd" >
          </div>
          <p v-if="pwdFormatErr" class="pwd-format-tip">密码至少包括一种类型，长度为8~20位，且为字母、数字、符号等任意2种以上组合</p>
          <div class="val-input">
              <span class="val-t">重新输入：</span>
              <input type="password" v-model="formData.rePwd">
          </div>
          <p v-if="rePwdFormatErr" class="pwd-format-tip">两次输入的密码不一致</p>
        <div class='val-input'>
            <span class="val-t">{{sessionData}}：</span>
            <input type="text" class="code-input" v-model="formData.code">
            <span class="codeBtn" @click="sendCode" :style="btnColor">{{sendCodeText}}</span>
        </div>
          <button class='addBtn' :disabled="!btnOff" :class="btnOff?'active':'no-active'" @click="sure()">{{btnText}}</button>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';//导入toast组件
export default {
    data() {
        return{
            formData:{
                oldPwd:'',
                newPwd:'',
                rePwd:'',
                code:'',
            },
            btnText:'确认修改',
            sendCodeText:'发送',
            btnColor:'color:#3381ff',
            sessionData:'',
            isLogin:''
        }
    },
    computed:{
        btnOff: function () {
            return this.formData.oldPwd && this.formData.newPwd && this.formData.rePwd && this.formData.code && this.formData.newPwd == this.formData.rePwd;
        },
        pwdFormatErr: function() {
            return !/^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{8,20}$/.test(this.formData.newPwd) && this.formData.newPwd
        },
        rePwdFormatErr: function() {
            return this.formData.rePwd && (this.formData.rePwd != this.formData.newPwd)
        }
    },
    mounted() {
          this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
            if(res.data.data.loginName.search("@")>-1){
                 this.sessionData="邮箱验证码";
            }else{
                 this.sessionData="短信验证码";
            }
        })
    },
    methods: {
        sure(){
            let formData = {
                oldPassword: this.formData.oldPwd,
                pwd:this.formData.newPwd,
                code: this.formData.code
            }
            this.$http.post('/v1/account/modPassWordOfLogin',formData).then(res=>{
                res = res.data
                if(res.code == 200){
                    Toast('密码修改成功')
                }else if(res.code == 100){
                    Toast('请先发送验证码')
                }else if(res.code == 101){
                    Toast('发送验证码频繁，请2小时候再试')
                }else if(res.code == 102){
                    Toast('验证码错误，剩余可尝试次数为'+ res.data +'次')
                }else if(res.code == 103){
                    Toast('请填写密码')
                }else if(res.code == 104){
                    Toast('新密码不能和旧密码一致')
                }else if(res.code == 105){
                    Toast('新密码不能和交易密码一致')
                }else if(res.code == 106){
                    Toast('原密码不正确，请核对后重新输入')
                }
            }).catch(err=>{

            })
        },
        handleClose(){
                this.$router.go(-1);
            },
        sendCode() {
            if(!isNaN(this.sendCode)){
                    return ;
                }
            this.$http.post('/v1/account/sendCode').then(res=>{
                res = res.data
                if(res.code == 200){
                    this.sendCodeText = 60
                    this.btnColor = 'color:#ddd'
                    var timeId = setInterval(function(){
                        this.sendCodeText--
                        if(this.sendCodeText == 0){
                            clearInterval(timeId)
                            this.btnColor = 'color:#3381ff'
                            this.sendCodeText = '发送'
                        }
                    }.bind(this),1000)
                }
            }).catch(err=>{

            })
        }
    }
}
</script>

<style lang="less" scoped>
    #password{
        font-family:PingFang SC;
        font-weight:500;
    }
    .user-top {
        height: 110px;
        line-height: 110px;
        padding: 0 60px;
        border-bottom: 1px solid #222240;
    }
    .form-format{
        padding: 0 30px;
        .val-input{
            height: 93px;
            line-height: 93px;
            border-bottom: 1px solid #222240;
            display: flex;
            .val-t{
                width: 180px;
                font-size: 28px;
                color:#8686C0;
            }
            input{
                line-height: 93px;
                border:none;
                background:none;  
                outline:none;  
                font-size: 30px;
                padding-left: 20px;
                flex: 1;
                color: #E0E0F9;
            }
            .input-code{
                flex: 1;
            }
            .codeBtn{
                width: 58px;
                text-align: center;
                font-size: 24px;
                color: #3381ff;
            }
            input:focus{   
                border:none;
            }
        }
        .addBtn{
            display: block;
            width: 426px;
            line-height: 58px;
            font-size: 30px;
            text-align: center;
            margin:143px auto;
            margin-bottom: 0;
            border-radius: 4px;
            height:86px;
            border-radius:10px;
        }
      
        .pwd-format-tip{
            color:#FF8080;
            font-size: 20px;
            margin-top: 5px;
        }
    }
    .mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #161736;
    color: #E0E0F9
}
  .load .active{
            background-color: #3381ff;
            color: #ffffff;
        }
        .load  .no-active{
            color: #161736;
            background-color: #f6f6f6;
        }
</style>